<template>
  <div class="main">
    <div class="top">
      <div class="back">
        <img src="../../assets/img/icon/jiantou_left.svg" @click="comeBack" >
        <span>返回</span>
      </div>
      <span>上传综测细则</span>
    </div>
    <div class="uploadArea">
      <div class="x" id="inputx">
        <input type="file" id="uploadRelu" @input="getFile">
<!--        <div class="x" style="width: 100%;height: 100%;position: relative;left: 0;top: -100%"></div>-->
      </div>
      <img src="../../assets/img/icon/uploadFile.svg" class="dowm">
      <div class="text" >点击上传excel表</div>
    </div>
    <div class="remarks">备注：仅支持excel表格形式的文件，同时需按照样表规 范填写，若填写不规范将退回。</div>
    <div class="submit" @click="submit">确认提交</div>
  </div>
</template>

<script>

// Jquary(document).ready(function () {
//   ('#inputx').click(function () {
//     $('#uploadRelu').click()
//   })
// })
import axios from 'axios';
export default {
  name: 'UploadRelu',
  data () {
    return {
      relus: [
        {
          subject: '德育',
          items: []
        },
        {
          subject: '智育',
          items: []
        },
        {
          subject: '体育',
          items: []
        }
      ]
    }
  },
  methods: {
    comeBack: function () {
      this.$router.push({ name: 'Emine' })
    },
    getFile: function (e) {
      // console.log('解析文件')
      // 拿到所导入文件的名字
      let fileName = e.target.files[0]
      // console.log(fileName)
      // 定义reader，存放文件读取方法
      let reader = new FileReader()
      // 启动函数
      reader.readAsBinaryString(fileName)
      // onload在文件被读取时自动触发
      var relus = [
        {
          subject: '德育',
          items: []
        },
        {
          subject: '智育',
          items: []
        },
        {
          subject: '体育',
          items: []
        }
      ]
      reader.onload = function (e) {

        // workbook存放excel的所有基本信息
        let workbook = XLSX.read(e.target.result, { type: 'binary' })

        // 定义sheetList中存放excel表格的sheet表，就是最下方的tab
        // console.log(workbook.Sheets.Sheet1)
        let sheet = workbook.Sheets.Sheet1

        for (var i in sheet) {
          var str = i.toString()
          if (str == '!margins' || str == '!ref') {
            // console.log('跳过')
            continue
          } else if (str == 'A1' || str == 'B1' || str == 'C1') {
            // console.log('题目')
            continue
          }
          // console.log(i)
          // console.log(sheet[i])
          var num = str.match(/[1-9][0-9]*/g)[0] // 第几条
          var head = str.match(/[A-C]/)[0] // 属于德智体？
          // console.log(head)
          if (head == 'A') {
            console.log('match A')
            relus[0].items.push(sheet[i].v)
            // console.log('push')
          } else if (head == 'B') {
            console.log('match B')
            relus[1].items.push(sheet[i].v)
          } else if (head == 'C') {
            console.log('match C')
            relus[2].items.push(sheet[i].v)
          }
        }
        // console.log(relus)
        // this.relus[0].items = relus[0].items
        // this.relus[1].items = relus[1].items
        // this.relus[2].items = relus[2].items
        // {
        //   subject: '德育',
        //     relus[0].items
        // }
        // vue.$set(this.relus,0 ,{
        //   subject: '德育',
        //   relus[0].items
        // })
        // vue.$set(this.relus,1 ,{
        //   subject: '智育',
        //   relus[1].items
        // })
        // vue.$set(this.relus,2 ,{
        //   subject: '体育',
        //   relus[2].items
        // })
        // this.$store.commit('setRelus', relus)

        // console.log(this.$store.state.action)

        // let sheetList = workbook.SheetNames
        // // 存放json数组格式的表格数据
        // let resultJson = []
        // // 存放字符串数组格式的表格数据
        // let resultFormulae = []
        // sheetList.forEach(function(y) {
        //   let worksheet = workbook.Sheets[y]
        //   let json = XLSX.utils.sheet_to_json(workbook.Sheets[y])
        //   let formulae = XLSX.utils.sheet_to_formulae(workbook.Sheets[y])
        //   if(json.length > 0){
        //     // 具体如何处理看项目需求，我的项目其实只有一个sheet，在这里写成循环避免大家误会
        //     //数据处理与存放
        //     resultJson.push(json)
        //     resultFormulae.push(formulae)
        //   }
        //
        // });
        // // 因为我的表格只有一列，因此我取出resultJson第一组数据的key作为键去遍历取出手机号码
        // let tableHeader = Object.keys(result[0])[0]
        // let importInfo = result.map((item) => {
        //   return item[tableHeader]
        // })
      }
      this.relus = relus
      alert('上传Excel成功')
      console.log(this.relus)
    },
    submit: function () {
      console.log(this.relus)
      if (this.relus[0].items.length == 0 && this.relus[1].items.length == 0 && this.relus[2].items.length == 0) {
        alert('请上传excel文件')
        // return
      } else {
        this.$store.commit('setRelus', this.relus)
        // 转化为后端的格式
        var uploadRelus = []
        var de = this.relus[0]
        var zhi = this.relus[1]
        var ti = this.relus[2]
        for (var i = 0; i < de.items.length; i++) {
          var item = {
            subject: 0,
            relu: de.items[i],
            reluId: i,
            college: this.$store.getters.getLoginUser.collegeName,
            year: null
          }
          uploadRelus.push(item)
        }
        for (var i = 0; i < zhi.items.length; i++) {
          var item = {
            subject: 1,
            relu: zhi.items[i],
            reluId: i,
            college: this.$store.getters.getLoginUser.collegeName,
            year: null
          }
          uploadRelus.push(item)
        }
        for (var i = 0; i < ti.items.length; i++) {
          var item = {
            subject: 2,
            relu: ti.items[i],
            reluId: i,
            college: this.$store.getters.getLoginUser.collegeName,
            year: null
          }
          uploadRelus.push(item)
        }
        console.log("---------------上传的参数-------------------------")
        console.log(uploadRelus)
        console.log("---------------上传的参数-------------------------")

        // ajax
        // let data = {
        //   uploadRelus: uploadRelus
        // }
        // // data = JSON.stringify(data)
        // axios({
        //   // contentType :'application/json; charset=utf-8',
        //   url: '/college/uploadRelus',
        //   method: 'post',
        //   data: data
        // }).then(res => {
        //   console.log(res)
        // })
        let data = uploadRelus
        axios({
          url: '/studentevaluation/api/rules/rules',
          method: 'post',
          data: data
        }).then(res => {
          alert('提交成功')
          this.$router.go(-1)
        })
      }
      console.log(this.$store.state.relus)
    }
  }
}
</script>

<style scoped lang="scss">
  .main{
    //height: calc(100% - #{px2rem(55)});
    overflow: hidden;
  }
  .top{
    width: 100%;
    height: px2rem(44);
    background: white;
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:bold;
    line-height:px2rem(25);
    color:rgba(38,38,38,1);
    display: flex;
    align-items: center;
    span{
      margin-left:  calc(50% - #{px2rem(50)});
    }
    .back{
      position: absolute;
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:500;
      line-height:px2rem(20);
      color:rgba(38,38,38,1);
      margin-right: px2rem(53);
      margin-left: px2rem(20);
      img{
        width: px2rem(16);
        height: px2rem(14);
      }
      span{
        margin-left: px2rem(3);
      }
    }
    }
  .uploadArea{
    position: relative;
    input{
      width: 100%;
      height: 100%;
      /*z-index: 2;*/
      /*visibility: ;*/
      background-color: transparent;
      /*filter: Alpha(Opacity=0);*/
      opacity: 0;
    }
    width: px2rem(296);
    height: px2rem(108);
    background:rgba(219,219,219,1);
    opacity:1;
    border-radius:px2rem(4);
    /*margin-left: px2rem(40);*/
    margin-left:  calc(50% - #{px2rem(148)});
    margin-top: px2rem(35);
    position: relative;
    .x{
      float: left;
      position: absolute;
      left: px2rem(125);
      top: px2rem(21);
      width: px2rem(46);
      height: px2rem(46);
      background: url("../../assets/img/icon/x.svg");
      background-size: 100% 100%;
    }
    .dowm{
      margin-left: px2rem(140);
      margin-top: px2rem(6);
      width: px2rem(89);
      height: px2rem(92);
    }
    .text{
      float: left;
      position: absolute;
      left: px2rem(96);
      top: px2rem(74);
      font-size:px2rem(14);
      font-family:PingFang SC;
      font-weight:bold;
      line-height:px2rem(20);
      color:rgba(102,102,102,1);
    }
  }
  .remarks{
    width: px2rem(293);
    height: px2rem(34);
    font-size:px2rem(12);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(17);
    color:rgba(102,102,102,1);
    /*margin-left: px2rem(41);*/
    margin-left:  calc(50% - #{px2rem(148)});
    margin-top: px2rem(16);
  }
  .submit{
    width: px2rem(277);
    height: px2rem(44);
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../assets/img/icon/uploader_homepage_btn_sub.svg");
    background-size: 100% 100%;
    /*margin-left: px2rem(49);*/
    margin-left:  calc(50% - #{px2rem(138)});
    margin-top: px2rem(72);
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:500;
    line-height:px2rem(25);
    color:rgba(255,255,255,1);
  }

</style>
